<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>图书名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="showOrHidden">
                <tr v-for="(item, index) of list">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.bookName }}</td>
                    <td>{{ item.publishTime }}</td>
                    <td>{{ item.bookPrice }}</td>
                    <td>
                        <input type="button" value="-" name="number" @click="reduce(index)"
                            :disabled="item.shopNum <= 0">
                        <input type="text" v-model="item.shopNum">
                        <input type="button" value="+" name="number" @click="increment(index)">
                    </td>
                    <td>
                        <input type="button" value="移除" @click="remove(index)">
                    </td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="6">
                        购物车为空
                    </td>
                </tr>
            </tbody>
        </table>
        <span>合计:{{ totalPrice }}￥</span>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';

let books = [
    {
        id: 1,
        bookName: '《JavaScript高级教程》',
        publishTime: '2006-9',
        bookPrice: 85,
        shopNum: 10
    },
    {
        id: 2,
        bookName: '《C语言基础》',
        publishTime: '2006-2',
        bookPrice: 59,
        shopNum: 10
    },
    {
        id: 3,
        bookName: '《Java高级语言》',
        publishTime: '2008-10',
        bookPrice: 39,
        shopNum: 10
    },
    {
        id: 4,
        bookName: '《代码大全》',
        publishTime: '2006-3',
        bookPrice: 128,
        shopNum: 10
    },
    {
        id: 5,
        bookName: '《你不知道JavaScript》',
        publishTime: '2014-8',
        bookPrice: 88,
        shopNum: 10
    },
]
books.forEach(item => {
    let xx = item.bookPrice.toFixed(2)
    item.bookPrice = xx
})

// 定义tbody的显示状态根据有没有数据来显示
let showOrHidden = ref(true)

let list = ref(books)
// 购物数量减少功能
function reduce(id) {
    list.value[id].shopNum--
}
// 购物数量增加功能
function increment(id) {
    list.value[id].shopNum++
}
// 购物车移除功能
function remove(id) {
    list.value.splice(id, 1)
    let arrLength = list.value.length
    if (arrLength === 0) {
        showOrHidden.value = false
    }
}
// 计算属性用来统计总价
let totalPrice = computed(() => {
    return list.value.reduce((a, b) => {
        return a += b.bookPrice * b.shopNum
    }, 0)
})



</script>
<style>
body {
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

table {
    width: 1200px;
    line-height: 30px;
    border-collapse: collapse;
    overflow: hidden;
    text-align: center;
    font-family: cursive;
}

tr,
td,
th {
    border: 1px solid pink;
}

[type=text] {
    width: 40px;
    margin: 0px 10px 0px 10px;
    outline: none;
    border: none;
    text-align: center;
}

[name=number] {
    width: 60px;
    border-radius: 6px;
    aspect-ratio: 2/1;
}

span {
    font-size: 30px;
    font-family: cursive;
    font-weight: 900;
    text-shadow: 3px 3px 3px red;
}
</style>